<!--
 * @Author: lee & kai
 * @Date: 2022-11-17 16:09:21
 * @LastEditTime: 2023-02-16 15:56:03
-->
<template>
  <div class="dataSource_content">
    <div class="page_title" v-if="showlist">Data source</div>
    <!-- 添加&编辑 -->
    <addDataSource ref="addSource" @handleshow="handleShow()" />
    <!-- 预览 -->
    <DataPreview @handleshow="handleShow()" ref="previewSource" />
    <div class="table_content" v-if="showlist">
      <!-- search input -->
      <div class="table_head">
        <Input
          v-model="keyword"
          suffix="ios-search"
          :placeholder="`Search by SourceName`"
          @on-change="debounce"
          style="width: 304px; height: 32px; margin: 10px 0 10px 0"
        >
        </Input>
        <div class="add" @click="addSource()">
          <Icon type="md-add" size="25" style="z-index: 9999; color: #222b27" />
        </div>
      </div>
      <div class="table_box">
        <Table
          :columns="columns"
          :data="DataSourceList"
          :class="{ empty_table: isEmptyData }"
        >
          <template #dataSource="{ row, index }">
            {{ formatterSourceName(row.dataSource) }}
          </template>
          <template #creationTime="{ row, index }">
            {{ row.creationTime.replace("T", " ") }}
          </template>
          <template #Enable="{ row, index }">
            <span v-if="row.enabled" class="tag_staus_green">YES</span>
            <span v-else class="tag_staus_red">NO</span>
          </template>
          <template #action="{ row, index }">
            <!-- 预览 -->
            <Icon
              type="md-eye"
              color="#13D3BD"
              size="18"
              @click="handlePreview(row)"
              style="margin-right: 5px"
            />
            <!-- 编辑 -->
            <Icon
              type="ios-construct-outline"
              color="#FF9533"
              @click="handleEdit(row.id)"
              size="18"
              style="margin-right: 5px"
            />
            <!-- 删除 -->
            <Icon
              type="md-trash"
              color="#FF5B68"
              size="18"
              @click="handlerModalShow(row)"
            />
          </template>
        </Table>
        <div class="empty_ui" v-if="isEmptyData">
          暂时没有数据哦。。。
          <!-- <img :src="require('../../../assets/img/empty_table.png')" alt="" /> -->
        </div>
      </div>
      <!-- 分页区域 -->
      <div class="page">
        <Page
          :total="total"
          :current="pageIndex"
          :page-size="pageSize"
          :page-size-opts="pagelist"
          size="small"
          @on-change="handleChange"
          @on-page-size-change="handleSizeChange"
          show-sizer
          show-total
          show-elevator
        />
      </div>
    </div>
    <!-- 删除模态框 -->
    <Modal v-model="modal1" width="360" title="Delete">
      <!-- <template #header>
        <p style="color:#f60;text-align:center">
          <Icon type="ios-information-circle"></Icon>
          <span>Delete</span>
        </p>
      </template> -->
      <div style="text-align: center">
        <p>Are you sure to delete the Data source {{ item.dataSource }}?</p>
      </div>
      <template #footer>
        <div class="foot">
          <div
            class="leftBtn"
            :class="activeBtn === 'Cancel' ? 'activeBtnClass' : ''"
            @click="(activeBtn = 'Cancel'), (modal1 = false)"
          >
            Cancel
          </div>
          <div
            class="rightBtn"
            @click="(activeBtn = 'Confirm'), handlerDelete()"
            :class="activeBtn === 'Confirm' ? 'activeBtnClass' : ''"
          >
            Confirm
          </div>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script>
import "./TAB6/index.less";
import addDataSource from "./TAB6/AddDataSource.vue";
import DataPreview from "./TAB6/DataSourcePreview.vue";

export default {
  props: {},
  data() {
    return {
      select2: "Source Name",
      activeBtn: "Confirm",
      modal_loading: false,
      modal1: false,
      item: {},
      keyword: "",
      timer: null, // 输入框
      showlist: true,
      columns: [
        {
          title: "Data source name",
          key: "dataSource",
          slot: "dataSource",
        },
        {
          title: "Type",
          key: "eType",
        },
        {
          title: "Enable",
          key: "enabled",
          slot: "Enable",
        },
        {
          title: "Creator",
          key: "creatorUserID",
        },
        {
          title: "Date Created",
          key: "creationTime",
          slot: "creationTime",
        },
        {
          title: "Operation",
          slot: "action",
        },
      ],
      DataSourceList: [],
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      pagelist: [10, 20, 25, 30],
    };
  },
  watch: {},
  computed: {
    isEmptyData() {
      if (!this.DataSourceList.length) {
        return true;
      }
      return false;
    },
  },
  methods: {
    init() {
      this.getSourcepageList();
    },
    /** 防抖 */
    debounce() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.SearchList();
      }, 500);
    },
    handlerModalShow(record) {
      this.item = record;
      this.modal1 = true;
    },
    // 打开预览
    handlePreview(record) {
      this.showlist = false;
      this.$refs.previewSource.handleopen(record.id);
    },
    // 打开编辑
    handleEdit(id) {
      this.showlist = false;
      this.$refs.addSource.handleopen(id);
    },
    // 打开添加
    addSource() {
      this.showlist = false;
      this.$refs.addSource.handleopen();
    },
    handleShow() {
      this.showlist = true;
      this.keyword = "";
      this.getSourcepageList();
    },
    // 格式化dataSourcename
    formatterSourceName(name) {
      if (name.length >= 10) {
        const newName = `${name.slice(0, 10)}...`;
        return newName;
      }
      return name;
    },
    // 删除
    DeleteDataSourcebyid(id) {
      // ROUTER.LoraWan2DBConfig.operate;
      const url = `${ROUTER.LoraWan2DBConfig.Delete}/${parseInt(id)}`;
      this.$http.post(url).then((res) => {
        console.log(
          "----------------------- DeleteDataSourcebyid -----------------------"
        );
        if (res.data.isSuccess) {
          this.modal1 = false;
          this.$Message.success("Delete Successfully");
          this.getSourcepageList();
        } else {
          this.$Message.error(res.error);
        }
      });
    },
    // Confim to Delete
    handlerDelete() {
      this.DeleteDataSourcebyid(this.item.id);
    },
    SearchList() {
      this.getSourcepageList(this.keyword);
    },
    /** 分页 */
getSourcepageList(name = '') {
  const url = `${ROUTER.LoraWan2DBConfig.List}?projectId=${this.$route.query.projectId}&PageIndex=${this.pageIndex}&PageSize=${this.pageSize}&dataSource=${name}`;
  this.$http.get(url).then((res) => {
    console.log(res);
    if (res.data.isSuccess) {
      this.DataSourceList = res.data.data;
      this.total = res.data.extendData.iTotalRecordCount;
    }
  });
},
    /** 页码改变的回调，返回改变后的页码 */
    handleChange(e) {
      this.pageIndex = e;
      this.getSourcepageList();
    },
    /** 切换每页条数时的回调，返回切换后的每页条数 */
    handleSizeChange(e) {
      this.pageSize = e;
      this.getSourcepageList();
    },
  },
  components: {
    addDataSource,
    DataPreview,
  },
  created() {
    this.init();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.table_content {
  position: relative;
  background-color: #1a253a;
  padding: 20px;
  .table_head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .add {
      height: 32px;
      width: 32px;
      margin-left: 20px;
      border-radius: 5px;
      text-align: center;
      line-height: 37px;
      background-color: #22ffe5;
    }
  }
  .tag_staus_green {
    display: block;
    width: 60px;
    height: 28px;
    color: #30e82c;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 28px;
    background-color: rgba(48, 232, 44, 0.3);
    border-radius: 3px;
  }
  .tag_staus_red {
    display: block;
    width: 60px;
    height: 28px;
    color: #f96435;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 28px;
    background-color: rgba(249, 100, 53, 0.3);
    border-radius: 3px;
  }
  .page {
    position: absolute;
    margin-top: 20px;
    left: 50%;
    transform: translate(-50%);
    /deep/.ivu-page {
      background: #041622 !important;
      padding: 4px 12px 4px 12px !important;
      border-radius: 5px;
      font-weight: 400;
      color: #ffffff99;
      .ivu-page-prev,
      .ivu-page-next {
        background: #041622 !important;
      }
      .ivu-page-item {
        color: #24645e;
        background: #041622 !important;
      }
      .ivu-page-item-active a,
      .ivu-page-item-active:hover a {
        color: #041622 !important;
      }
      .ivu-page-item-active {
        background: #19b9aa !important;
        color: #041622 !important;
      }
      .ivu-page-options-elevator input {
        background: #24645e !important;
        color: #fff;
        border: none;
      }
    }
  }
}
.foot {
  display: flex;
  height: 10%;
  justify-content: center;
  align-items: center;
  .rightBtn,
  .leftBtn {
    cursor: pointer;
    width: 148px;
    height: 40px;
    font-size: 16px;
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    color: #b3b3b3;
    background-color: #1c2424;
  }
  .rightBtn {
    margin-left: 48px;
  }
  .activeBtnClass {
    width: 148px;
    height: 40px;
    background-color: #22ffe5;
    color: #171717;
  }
}

/deep/ .ivu-modal {
  .ivu-modal-content {
    background-color: #142f2d !important;
  }
}
</style>
<style lang="less"></style>
